<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <script src="/static/order/confirm/js/jquery-3.1.1.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/static/order/confirm/css/JD2.css"/>

  <title></title>
</head>

<body>
<!--顶部-->
<header>
  <div class="header">
    <ul class="header-left">
      <li>
        <img src="/static/order/confirm/img/header_1.png"/>
        <a href="http://freedymall.com/">谷粒学院首页</a>
      </li>
      <li class="header-l-2">
        <i class="fa fa-map-marker" style="color: #5C5452;"></i>
        <a href="">北京</a>
        <div class="header-l-d">

          <ul>
            <li><a href="" style="background: red; color: white;">北京</a></li>
            <li><a href="">山西</a></li>
            <li><a href="">内蒙古</a></li>
            <li><a href="">福建</a></li>
            <li><a href="">江西</a></li>
            <li><a href="">西藏</a></li>
            <li><a href="">新疆</a></li>
          </ul>
          <ul>
            <li><a href="">上海</a></li>
            <li><a href="">河南</a></li>
            <li><a href="">江苏</a></li>
            <li><a href="">湖北</a></li>
            <li><a href="">四川</a></li>
            <li><a href="">陕西</a></li>
            <li><a href="">港澳</a></li>
          </ul>
          <ul>
            <li><a href="">天津</a></li>
            <li><a href="">辽宁</a></li>
            <li><a href="">山东</a></li>
            <li><a href="">湖南</a></li>
            <li><a href="">海南</a></li>
            <li><a href="">甘肃</a></li>
            <li><a href="">台湾</a></li>
          </ul>
          <ul>
            <li><a href="">重庆</a></li>
            <li><a href="">吉林</a></li>
            <li><a href="">安徽</a></li>
            <li><a href="">广东</a></li>
            <li><a href="">贵州</a></li>
            <li><a href="">青岛</a></li>
            <li><a href="">钓鱼岛</a></li>
          </ul>
          <ul>
            <li><a href="">河北</a></li>
            <li><a href="">黑龙江</a></li>
            <li><a href="">浙江</a></li>
            <li><a href="">广西</a></li>
            <li><a href="">云南</a></li>
            <li><a href="">宁夏</a></li>
            <li><a href="">海外</a></li>
          </ul>


        </div>
      </li>

    </ul>
    <ul class="header-right">
      <li th:if="${session.data!=null}">欢迎:[[${session.data.username}]]<img src="/static/order/confirm/img/03.png"
                                                                            style="margin-bottom: 0px;margin-left3: 3px;"/><img
          src="/static/order/confirm/img/06.png"/></li>
      <li>|</li>
      <li class="spacer"></li>
      <li><a href="">我的订单</a></li>
      <li class="spacer"></li>
      <li>
        <a href="">我的谷粒学院</a>
        <i class="fa fa-angle-down"></i>
        <div class="header-r-1 aa header-r-11">
          <div>
            <ol>
              <dd><a href="">待处理订单</a></dd>
              <dd><a href="">返修退换货</a></dd>
              <dd><a href="">降价商品</a></dd>

            </ol>
            <ol>
              <dd><a href="">消息</a></dd>
              <dd><a href="">我的问答</a></dd>
              <dd><a href="">我的关注</a></dd>

            </ol>

          </div>
          <div>
            <ol>
              <dd><a href="">我的京豆</a></dd>
              <dd><a href="">我的白条</a></dd>
            </ol>
            <ol>
              <dd><a href="">我的优惠劵</a></dd>
              <dd><a href="">我的理财</a></dd>
            </ol>

          </div>
          <div>
            <h4><a href="">我的足迹</a><a href="">更多 ></a></h4>
            <a href=""><img src="/static/order/confirm/image/59ae02fcN529cc4a1.jpg"/></a>
            <a href=""><img src="/static/order/confirm/image/59ce706fN6f3f2a4a.jpg"/></a>
            <a href=""><img src="/static/order/confirm/image/57b191f2N15993cbb.jpg"/></a>
            <a href=""><img src="/static/order/confirm/image/58ff269fN7b7e087b.jpg"/></a>

          </div>
        </div>

      </li>
      <li class="spacer"></li>
      <li><a href="">谷粒学院会员</a></li>
      <li class="spacer"></li>
      <li><a href="">企业采购</a></li>
      <li class="spacer"></li>
      <li>
        <a href="">客户服务</a>
        <i class="fa fa-angle-down"></i>
        <div class="header-r-1 aa header-r-2">
          <div>
            <h4>客户</h4>
            <ol>

              <dd><a href="">帮助中心</a></dd>
              <dd><a href="">在线客服</a></dd>
              <dd><a href="">电话客服</a></dd>
              <dd><a href="">金融咨询</a></dd>
            </ol>
            <ol>

              <dd><a href="">售后服务</a></dd>
              <dd><a href="">意见建议</a></dd>
              <dd><a href="">客服邮箱</a></dd>
              <dd><a href="">售全球客服</a></dd>
            </ol>
          </div>
          <div>
            <h4>商户</h4>
            <ol>

              <dd><a href="">合作招商</a></dd>
              <dd><a href="">商家后台</a></dd>
              <dd><a href="">商家帮助</a></dd>
            </ol>
            <ol>

              <dd><a href="">学习中心</a></dd>
              <dd><a href="">京麦工作台</a></dd>
              <dd><a href="">规则平台</a></dd>
            </ol>
          </div>
        </div>

      </li>
      <li class="spacer"></li>
      <li>
        <a href="">网址导航</a>
        <i class="fa fa-angle-down"></i>
        <div class="header-r-1 aa header-r-3">
          <div>
            <h4>特色主题</h4>
            <ol>
              <dd><a href="">谷粒学院试用</a></dd>
              <dd><a href="">国际站</a></dd>
              <dd><a href="">买什么</a></dd>
              <dd><a href="">0元评测</a></dd>
              <dd><a href="">优惠劵</a></dd>
              <dd><a href="">印尼站</a></dd>
              <dd><a href="">陪伴计划</a></dd>
            </ol>
            <ol>
              <dd><a href="">谷粒学院金融</a></dd>
              <dd><a href="">谷粒学院会员</a></dd>
              <dd><a href="">俄语站</a></dd>
              <dd><a href="">定期送</a></dd>
              <dd><a href="">秒杀</a></dd>
              <dd><a href="">谷粒学院金融科技</a></dd>
              <dd><a href="">出海招商</a></dd>
            </ol>
            <ol>
              <dd><a href="">全球售</a></dd>
              <dd><a href="">谷粒学院预售</a></dd>
              <dd><a href="">装机大师</a></dd>
              <dd><a href="">港澳售</a></dd>
              <dd><a href="">闪购</a></dd>
              <dd><a href="">In货推荐</a></dd>
            </ol>

          </div>

          <div>
            <h4>行业推荐</h4>
            <ol>
              <dd><a href="">手机</a></dd>
              <dd><a href="">玩3C</a></dd>
              <dd><a href="">家用电器</a></dd>
              <dd><a href="">服装城</a></dd>
              <dd><a href="">家装城</a></dd>
              <dd><a href="">食品</a></dd>
              <dd><a href="">农资频道</a></dd>
              <dd><a href="">图书</a></dd>

            </ol>
            <ol>
              <dd><a href="">智能数码</a></dd>
              <dd><a href="">电脑办公</a></dd>
              <dd><a href="">谷粒学院智能</a></dd>
              <dd><a href="">美妆馆</a></dd>
              <dd><a href="">母婴</a></dd>
              <dd><a href="">运动户外</a></dd>
              <dd><a href="">整车</a></dd>
            </ol>
          </div>


          <div>
            <h4>生活服务</h4>
            <ol>
              <dd><a href="">谷粒学院众筹</a></dd>
              <dd><a href="">谷粒学院金融App</a></dd>
              <dd><a href="">理财</a></dd>
              <dd><a href="">话费</a></dd>
              <dd><a href="">彩票</a></dd>
              <dd><a href="">机票酒店</a></dd>
              <dd><a href="">酒店到家</a></dd>
              <dd><a href="">游戏</a></dd>

            </ol>
            <ol>
              <dd><a href="">白条</a></dd>
              <dd><a href="">谷粒学院小金库</a></dd>
              <dd><a href="">智能家电</a></dd>
              <dd><a href="">水电煤</a></dd>
              <dd><a href="">旅行</a></dd>
              <dd><a href="">电影票</a></dd>
              <dd><a href="">谷粒学院众测</a></dd>
            </ol>
          </div>


          <div>
            <h4>更多精选</h4>
            <ol>
              <dd><a href="">合作招商</a></dd>
              <dd><a href="">谷粒学院E卡</a></dd>
              <dd><a href="">服务市场</a></dd>
              <dd><a href="">乡村招募</a></dd>
              <dd><a href="">京友邦</a></dd>
              <dd><a href="">智能社区</a></dd>
              <dd><a href="">知识产权维权</a></dd>


            </ol>
            <ol>
              <dd><a href="">谷粒学院通信</a></dd>
              <dd><a href="">企业采购</a></dd>
              <dd><a href="">办公生活馆</a></dd>
              <dd><a href="">校园加盟</a></dd>
              <dd><a href="">谷粒学院社区</a></dd>
              <dd><a href="">游戏社区</a></dd>
            </ol>
          </div>
        </div>

      </li>
      <li class="spacer"></li>
      <li class="header-r-4"><a href="">手机谷粒学院</a>
        <div class="aa h-r-1">

          <div>
            <div class="h-r-1img">
              <img src="/static/order/confirm/img/59a51bf6Nb8e478cc.png"/>
            </div>
            <h4><a href="">手机谷粒学院</a></h4>
            <p>新人专享大礼</p>
            <div class="h-r-1img2">
              <a href=""><img src="/static/order/confirm/img/8104b36ae6b72043ae838599d36d007d.png" alt=""/></a>
              <a href=""><img src="/static/order/confirm/img/c0935b2c6504a5419e6ee507a5381bbe.png"/></a>
              <a href=""><img src="/static/order/confirm/img/a64b429ebf83d2459a0a73830f4ad4c4.png"/></a>
            </div>
          </div>
          <div>
            <div class="h-r-1img">
              <img src="/static/order/confirm/img/5874a54dNcec29924.jpg"/>
            </div>
            <h4><a href="">关注谷粒学院微信</a></h4>
            <p>微信扫一扫关注新粉最高180元惊喜礼包</p>
            <!--<div class="h-r-1img2">
              <a href=""><img src="/static/order/confirm/image/8104b36ae6b72043ae838599d36d007d.png" alt="" /></a>
              <a href=""><img src="/static/order/confirm/image/c0935b2c6504a5419e6ee507a5381bbe.png"/></a>
              <a href=""><img src="/static/order/confirm/image/a64b429ebf83d2459a0a73830f4ad4c4.png"/></a>
            </div>-->
          </div>
          <div>
            <div class="h-r-1img">
              <img src="/static/order/confirm/img/5874a555Ne8192324.jpg"/>
            </div>
            <h4><a href="">谷粒学院金融客户端</a></h4>
            <p>新人专享大礼</p>
            <div class="h-r-1img2">
              <a href=""><img src="/static/order/confirm/img/8104b36ae6b72043ae838599d36d007d.png" alt=""/></a>
              <a href=""><img src="/static/order/confirm/img/c0935b2c6504a5419e6ee507a5381bbe.png"/></a>
              <a href=""><img src="/static/order/confirm/img/a64b429ebf83d2459a0a73830f4ad4c4.png"/></a>
            </div>
          </div>

        </div>


      </li>


    </ul>
    <div style="clear: both;"></div>
  </div>


</header>

<!--logo图片-->
<div class="top-1">
  <a href="http://freedymall.com/"><img src="/static/order/confirm/img/logo1.jpg" class="img1"/></a><span>结算页</span>
  <!--右侧绿色-->
  <img src="/static/order/confirm/img/08.png" class="img2"/>
</div>
<!--主体部分-->
<p class="p1">填写并核对订单信息</p>
<h1 class="p1" style="color: red" th:if="${session.orderMsg!=null}" th:text="${session.orderMsg}"></h1>
<div class="section">
  <!--收货人信息-->
  <div class="top-2">
    <span>收货人信息</span>
    <span>新增收货地址</span>
  </div>

  <!--地址-->
  <div class="top-3 addr-item" th:each="data:${orderConfirmData.address}">
    <p th:attr="def=${data.defaultStatus},addrId=${data.id}" th:text="${data.name}">家里</p><span>[[${data.name}]]  [[${data.province}]]   [[${data.city}]]  [[${data.detailAddress}]]   [[${data.phone}]] </span>
  </div>
  <p class="p2">更多地址︾</p>
  <div class="hh1"/>
</div>
<!--支付方式-->
<h4 class="h4">支付方式</h4>

<div class="top-6">
  <p>货到付款</p>
  <p><span>惠</span>在线支付</p>
</div>
<div class="hh1"></div>
<!--送货清单-->
<h4 class="h4" style="margin-top: 5px;">送货清单</h4>

<div class="top_1">
  <div class="to_left">
    <h5><span class="peisong">配送方式</span><span class="dui"><img src="/static/order/confirm/img/i_03.png"/> 对应商品</span>
    </h5>
    <div class="box">
      谷粒学院快递
    </div>
    <p class="biao">
      <span class="til">标 准 达 ：</span>
      <span class="con">预计 12月16日[今天] 15:00-19:00 送达</span>
      <a href="#">修改</a>
    </p>
    <div class="updata-1">
      <img src="/static/order/confirm/img/im_06.png"/>
      <span>京准达 标准达</span>
      <span style="color: black;"> 配送服务全面升级</span>
    </div>
    <div class="hh1"></div>
    <p class="tui">
      <span class="til">退换无忧：</span>
      <span class="con">
							<input type="checkbox"/>
							自签收后7天内退货，15天内换<span style="font-size: 12px;margin-left: 5px"> ￥ 0.50</span><br/>
						<span class="nul">货，</span>可享1次上门取件服务 ﹀
						</span>

    <div class="updata-2">
      <img src="/static/order/confirm/img/im_11.png"/>
      <span>京准达运费大促（限自营中小件）</span>
    </div>

    </p>
    <p class="kg" style="color:#666666;margin-top: 13px;font-size: 12px">总重量 :<span
        style="color:#999999;font-size: 12px">0.095kg</span></p>
  </div>

  <div class="to_right" style="margin-bottom: 100px">
    <h5>商家：谷粒学院自营</h5>
    <div>
      <button>换购</button>
      <span>已购满20.00元，再加49.90元，可返回购物车领取赠品</span></div>
    <!--图片-->
    <div class="yun1" th:each="item:${orderConfirmData.items}">
      <img th:src="${item.image}" class="yun"/>
      <div class="mi">
        <p>[[${item.title}]]<span style="color: red;"> ￥ [[${#numbers.formatDecimal(item.price,1,2)}]]</span> <span> x[[${item.count}]] </span>
          <span>[[${item.hasStock?'有货':'无货'}]]</span></p>
        <p><span>[[${item.weight}]]kg</span></p>
        <p class="tui-1"><img src="/static/order/confirm/img/i_07.png"/>支持7天无理由退货</p>
      </div>
    </div>
  </div>

  <div class="xia" style="position: relative;top:50px;">
    <div class="qian">
      <p class="qian_y">
        <span>[[${orderConfirmData.count}]]</span>
        <span>件商品，总商品金额：</span>
        <span class="rmb">￥[[${#numbers.formatDecimal(orderConfirmData.total,1,2)}]]</span>
      </p>
      <p class="qian_y">
        <span>返现：</span>
        <span class="rmb">  -￥0.00</span>
      </p>
      <p class="qian_y">
        <span>运费： </span>
        <span class="rmb" id="Transfee"> &nbsp ￥0.00</span>
      </p>
      <p class="qian_y">
        <span>服务费： </span>
        <span class="rmb"> &nbsp ￥0.00</span>
      </p>
      <p class="qian_y">
        <span>退换无忧： </span>
        <span class="rmb"> &nbsp ￥0.00</span>
      </p>
    </div>

    <div class="yfze">
      <p class="yfze_a"><span class="z">应付总额：</span><span class="hq" id="allToPay">￥[[${#numbers.formatDecimal(orderConfirmData.payPrice,1,2)}]]</span>
      </p>
      <p class="yfze_b">寄送至：<span id="receiveAddress"></span> 收货人：<span id="receiver"></span></p>
    </div>
    <form method="post" action="http://order.freedymall.com/submitOrder">
      <input type="hidden" name="addrId" id="addrInput">
      <input type="hidden" name="payPrice" id="payPriceInput">
      <input type="hidden" name="orderToken" th:value="${orderConfirmData.orderToken}">
      <button class="tijiao" type="submit">提交订单</button>
    </form>
  </div>
</div>

<script>
  $(document).ready(function () {
    $('.header-right li:nth-of-type(6)').hover(function () {
      $('.header-r-11').css('display', 'block')
    }, function () {
      $('.header-r-11').css('display', 'none')
    })
    $('.header-right li:nth-of-type(12)').hover(function () {
      $('.header-r-2').css('display', 'block')
    }, function () {
      $('.header-r-2').css('display', 'none')
    })
    $('.header-right li:nth-of-type(14)').hover(function () {
      $('.header-r-3').css('display', 'block')
    }, function () {
      $('.header-r-3').css('display', 'none')
    })
    $('.header-l-2').hover(function () {
      $('.header-l-d').css('display', 'block')
    }, function () {
      $('.header-l-d').css('display', 'none')
    })
    $('.header-r-4').hover(function () {
      $('.h-r-1').css('display', 'block')
    }, function () {
      $('.h-r-1').css('display', 'none')
    })
    hightLight();
    let addrId = $(".addr-item p[def=1]").attr("addrId");
    $("#Transfee").text(" ￥"+addrId*10)
    let total=[[${orderConfirmData.total}]]
    $("#allToPay").text(total*1+addrId*10)
    $.get(`http://localhost:88/api/member/memberreceiveaddress/${addrId}/singleaddress`,function (data) {
      $("#receiveAddress").text(data.province+" "+data.city+" "+data.detailAddress)
      $("#receiver").text(data.name+" "+data.phone)
    })
    $("#addrInput").val(addrId)
    $("#payPriceInput").val(total*1+addrId*10)
  })

  function hightLight() {
    $(".addr-item p").css({"border": "2px solid grey"})
    $(".addr-item p[def=1]").css({"border": "2px solid red"})
  }

  $(".addr-item p").click(function () {
    $(".addr-item p").attr("def", 0)
    $(this).attr("def", 1)
    hightLight()
    let addrId = $(this).attr("addrId");
    $("#Transfee").text(" ￥"+addrId*10)
    let total=[[${orderConfirmData.total}]]
    $("#allToPay").text(total*1+addrId*10)
    $.get(`http://localhost:88/api/member/memberreceiveaddress/${addrId}/singleaddress`,function (data) {
      $("#receiveAddress").text(data.province+" "+data.city+" "+data.detailAddress)
      $("#receiver").text(data.name+" "+data.phone)
    })
    $("#addrInput").val(addrId)
    $("#payPriceInput").val(total*1+addrId*10)
  })


</script>

</body>

</html>